<script lang="ts">
import router from '@/router';
import { ref } from 'vue';
import { showToast } from 'vant';
export default {
    setup() {
        let Phone = ref('')
        let password = ref('')
        let checked = ref(false)
        const onSubmit = (values: object) => {
            if (!checked.value) { //查看是否勾选协议   
                showToast('注册前请勾选协议')
                if (password.value == '') {//看看密码是否为空
                    showToast('请输入密码')
                }
            } else {
                let user: any = JSON.parse(localStorage.getItem('user') as string) //本地存储
                console.log(user);
                if (Phone.value != user.userName || password.value != user.password) {
                    showToast('账户或密码错误')
                } else {
                    window.localStorage.setItem('token', JSON.stringify(values))
                    router.push({ path: '/' })
                    showToast('登录成功')
                }


            }
        };
        return {
            Phone,
            password,
            checked,
            onSubmit,
        }
    }
}
</script>
<template>
    <div class="Login">
        <header class="Login-Header">
            <van-nav-bar @click-left="$router.back()" :border="false">
                <template #left>
                    <van-icon name="arrow-left" color="#fff" />
                </template>
            </van-nav-bar>
        </header>
        <div class="Login-Body">
            <div class="Login-title">
                <h1>登录后更精彩</h1>
                <span>最优秀的装修指南都在期待与你的相遇</span>
            </div>
            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <van-field v-model="Phone" name="userName" placeholder="请输入手机号码或用户名"
                        :rules="[{ required: true, message: '请填写正确的手机号码', pattern: /^(?:(?:\+|00)86)?1\d{10}$/ }]" />
                    <van-field v-model="password" type="password" name="password" placeholder="请输入密码">
                        <template #extra>

                        </template>
                    </van-field>
                </van-cell-group>
                <van-button round block type="primary" native-type="submit">
                    登录
                </van-button>
                <div class="Login-operate">
                    <span class="operate" @click="$router.push({ path: '/RegisterView' })">去注册</span>
                </div>
            </van-form>
        </div>
        <div class="Login-footer">
            <div class="Login-Serve">
                <van-checkbox v-model="checked">
                    我已阅读并同意
                    <span>《服务使用协议》</span>
                    和
                    <span>《个人信息和隐私政策》</span>
                </van-checkbox>
            </div>
        </div>
    </div>
</template>
<style lang="scss">
input[type="password"]::-ms-reveal {
    display: none
}

.Login {
    height: 100vh;
    background: url(/src/assets/images/Login-Icon/login.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color: rgba(0, 0, 0, 0.5);
    background-blend-mode: darken;
    display: flex;
    flex-direction: column;
    padding: 0 16px;
    box-sizing: border-box;

    .Login-Header {
        .van-nav-bar {
            background-color: transparent;

            .van-nav-bar__left {
                padding: 0;

                i {
                    font-size: 20px;
                }
            }
        }
    }

    .Login-Body {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 48px;

        .Login-title {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #fff;
            margin-bottom: 14px;

            h1 {
                margin-bottom: 8px;
                font-size: 24px;
            }

            span {
                font-size: 14px;
            }
        }

        .van-form {
            display: flex;
            flex-direction: column;
            width: 100%;
            box-sizing: border-box;

            .van-cell-group {
                height: 150px;
                background-color: transparent;

                .van-cell {
                    border-bottom: 1px solid #f5f5f5;
                    box-sizing: border-box;
                    background-color: transparent;
                    margin-top: 15px;

                    input {
                        color: #fff;
                    }
                }

                span {
                    color: rgb(255 255 255 / .4);
                }
            }

            .van-button {
                border-radius: 4px;
                margin-top: 40px;
            }
        }

        .Login-operate {
            display: flex;
            margin-top: 20px;
            justify-content: space-between;

            span {
                font-size: 14px;
                color: rgb(255 255 255 / .4);
            }

        }
    }

    .Login-footer {
        .Login-Serve {
            font-size: 12px;
            margin-bottom: 20px;

            .van-checkbox {
                .van-checkbox__label {
                    color: rgb(255 255 255 / .4);

                    span {
                        color: #fff;
                    }
                }
            }
        }
    }
}
</style>